<template>
  <div style="background: #eee">
    <!--头部-->
    <div class="header">
      <div class="fixedbar" @click="toTop" v-show="flag">
        <img src="https://www.mescroll.com/img/mescroll-totop.png" alt="" />
      </div>
      <van-sticky>
        <van-row type="flex" justify="center" class="headerContainer">
          <!--左侧logo-->
          <van-col span="6" class="header_left"
            ><a class="logo" href="/"></a
          ></van-col>
          <!--中间搜索框-->
          <van-col span="14" class="header_center" @click="toSearch">
            <van-search
              disabled
              placeholder="搜索商品, 共105870款好物"
              shape="round"
              background="rgba(255,255,255,0)"
            />
          </van-col>
          <!--右侧登录按钮-->
          <van-col span="4" class="header_right"
            ><van-button
              v-if="!isLogin"
              @click="toLogin"
              plain
              type="primary"
              size="small"
              >登录</van-button
            ></van-col
          >
        </van-row>
      </van-sticky>
      <!--tab导航-->
      <div class="tab">
        <van-tabs
          class="tabContainer"
          sticky
          :offset-top="45"
          @click="handleCategory"
          v-model="categoryId"
        >
          <!--导航右侧箭头-->
          <van-sticky :offset-top="45">
            <div class="toggleWrap">
              <div class="linear"></div>
              <div class="toggle">
                <van-icon
                  name="arrow-down"
                  class="icon_down"
                  @click="changeOverlayIstrue"
                />
              </div>
            </div>
          </van-sticky>
          <!--点击遮罩层-->
          <div
            class="overlay"
            v-if="overlayIstrue"
            @click="overlayIstrue = false"
          >
            <div class="overlayContent">
              <div class="overlayContent_top">
                <p>全部频道</p>
                <van-icon name="arrow-up" @click="changeOverlayIstrue" />
              </div>
              <div class="overlayContent_main">
                <div
                  class="overlayContent_mainItem"
                  :class="{ active: categoryId === 0 }"
                  @click.stop="handleCategory(0, false)"
                >
                  推荐
                </div>
                <div
                  class="overlayContent_mainItem"
                  :class="{
                    active:
                      categoryId === item.extra.operationResource.categoryId,
                  }"
                  v-for="(item, index) in tabList"
                  :key="index"
                  @click.stop="
                    handleCategory(
                      item.extra.operationResource.categoryId,
                      false
                    )
                  "
                >
                  {{ item.extra.operationResource.categoryName }}
                </div>
              </div>
            </div>
          </div>
          <!--推荐页-->
          <van-tab title="推荐">
            <!--轮播图-->
            <van-swipe
              :autoplay="3000"
              indicator-color="#FFF"
              class="swiperContainer"
            >
              <van-swipe-item
                class="swiperItem"
                v-for="(item, index) in banner"
                :key="index"
                ><img v-lazy="item.picUrl"
              /></van-swipe-item>
            </van-swipe>
            <!--服务说明-->
            <div class="serviceContainer">
              <div class="serviceItem" v-for="(item, index) in policyDescList">
                <img :src="item.icon" />
                <p>{{ item.desc }}</p>
              </div>
            </div>
            <!--宫格分类-->
            <div class="gridContainer">
              <div
                class="gridItem"
                v-for="(item, index) in gridList"
                :key="index"
                @click="handleGrid(item.schemeUrl)"
              >
                <img v-lazy="item.picUrl" />
                <p>{{ item.text }}</p>
              </div>
            </div>
            <!--楼层三张图-->
            <div class="floor" v-for="(item, index) in floorList" :key="index">
              <img :src="item.cells[0].picUrl" />
            </div>
            <!--新人专享礼-->
            <div class="newUserContainer">
              <div class="newUserTitle"><span>—— 新人专享礼 ——</span></div>
              <div class="newUserContent">
                <div class="content_left">
                  <div class="gift">新人专享礼包</div>
                  <img
                    src="https://yanxuan.nosdn.127.net/352b0ea9b2d058094956efde167ef852.png"
                  />
                </div>
                <div class="content_right">
                  <div class="content_right_top">
                    <div class="right_topContainer">
                      <div class="top_text">
                        <p class="fulishe">{{ newUserGift[0].title }}</p>
                        <p class="tejia">{{ newUserGift[0].subTitle }}</p>
                      </div>
                      <img :src="newUserGift[0].picUrl" />
                      <div class="discount">
                        <div class="line1">
                          {{ newUserGift[0].originPrice }}
                        </div>
                        <div class="line2">
                          {{ newUserGift[0].activityPrice }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="content_right_bottom">
                    <div class="right_topContainer">
                      <div class="top_text">
                        <p class="fulishe">{{ newUserGift[1].title }}</p>
                        <p class="tejia">{{ newUserGift[1].tag }}</p>
                      </div>
                      <img :src="newUserGift[1].showPicUrl" />
                      <div class="discount">
                        <div class="line1">
                          {{ newUserGift[1].activityPrice }}
                        </div>
                        <div class="line2">
                          {{ newUserGift[1].originPrice }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!--类目热销榜-->
            <div class="categoryContainer">
              <div class="categoryTitle">
                <div class="categoryTitle_text">
                  {{
                    categoryHotSellList.title
                      ? categoryHotSellList.title
                      : "类目热销榜"
                  }}
                </div>
              </div>
              <div class="categoryContent">
                <div class="content_one">
                  <div
                    class="content_one_left"
                    @click="
                      handleCategory(
                        categoryHotSellList.categoryList[0].extra
                          .operationResource.categoryId
                      )
                    "
                  >
                    <p>
                      {{ categoryHotSellList.categoryList[0].categoryName }}
                    </p>
                    <img
                      :src="categoryHotSellList.categoryList[0].showPicUrl"
                    />
                  </div>
                  <div
                    class="content_one_right"
                    @click="
                      handleCategory(
                        categoryHotSellList.categoryList[1].extra
                          .operationResource.categoryId
                      )
                    "
                  >
                    <p>
                      {{ categoryHotSellList.categoryList[1].categoryName }}
                    </p>
                    <img
                      :src="categoryHotSellList.categoryList[1].showPicUrl"
                    />
                  </div>
                </div>
                <div class="content_two">
                  <div
                    class="content_twoItem"
                    v-for="(item, index) in categoryList"
                    :key="index"
                    @click="
                      handleCategory(item.extra.operationResource.categoryId)
                    "
                  >
                    <p>{{ item.categoryName }}</p>
                    <img :src="item.showPicUrl" />
                  </div>
                </div>
              </div>
            </div>
            <!--底层其他展示-->
            <div class="otherShow">
              <div class="otherShowContainer">
                <div class="otherShow_left">
                  <div class="otherShow_left_text">
                    <p class="otherShow_left_text_title">
                      {{ yangMao[0].styleItem.title }}
                    </p>
                    <p class="otherShow_left_text_desc">
                      {{ yangMao[0].styleItem.desc }}
                    </p>
                  </div>
                  <div class="other_image">
                    <img
                      class="other_imageItem"
                      :src="yangMao[0].styleItem.picUrlList[0]"
                    />
                    <img
                      class="other_imageItem"
                      :src="yangMao[0].styleItem.picUrlList[1]"
                    />
                  </div>
                </div>
                <div class="otherShow_right">
                  <div class="otherShow_left_text">
                    <p class="otherShow_left_text_title">
                      {{ yangMao[1].styleItem.title }}
                    </p>
                    <p class="otherShow_left_text_desc">
                      {{ yangMao[1].styleItem.desc }}
                    </p>
                  </div>
                  <div class="other_image">
                    <img
                      class="other_imageItem"
                      :src="yangMao[1].styleItem.picUrlList[0]"
                    />
                    <img
                      class="other_imageItem"
                      :src="yangMao[1].styleItem.picUrlList[1]"
                    />
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
          <!--其他分类页-->
          <van-tab
            v-for="(item, index) in tabList"
            :key="index"
            :title="item.extra.operationResource.categoryName"
            :name="item.extra.operationResource.categoryId"
          >
            <!--轮播图-->
            <van-swipe
              :autoplay="3000"
              indicator-color="#FFF"
              class="swiperContainer"
            >
              <van-swipe-item
                class="swiperItem"
                v-for="(item, index) in categoryPageBanner"
                :key="index"
                ><img v-lazy="item.picUrl"
              /></van-swipe-item>
            </van-swipe>
            <!--商品列表-->
            <div class="skuListContainer">
              <div
                class="skulist"
                v-for="(item, index) in categoryItemList"
                :key="index"
              >
                <div class="goodsItem">
                  <div class="split-box"></div>
                  <div class="blockText">
                    <p class="blockText_title">{{ item.category.name }}</p>
                    <p class="blockText_desc">{{ item.category.frontName }}</p>
                  </div>
                  <div class="skulist-content">
                    <div
                      class="skuItem"
                      v-for="(goods, index) in item.itemList"
                      @click="toGoodsDetails"
                    >
                      <div class="skuImg">
                        <img v-lazy="goods.listPicUrl" />
                      </div>
                      <div class="skuName">{{ goods.name }}</div>
                      <div
                        class="skuPrice1"
                        v-if="goods.finalPriceInfoVO.priceInfo.finalPrice"
                      >
                        <p>
                          <span
                            class="Price1"
                            v-if="
                              goods.finalPriceInfoVO.priceInfo.finalPrice.price
                            "
                            >到手价￥</span
                          >
                          <span
                            class="Price3"
                            v-if="
                              goods.finalPriceInfoVO.priceInfo.finalPrice.price
                            "
                            >{{
                              goods.finalPriceInfoVO.priceInfo.finalPrice.price
                            }}</span
                          >
                          <span
                            class="Price2"
                            v-if="goods.finalPriceInfoVO.priceInfo.counterPrice"
                            >￥{{
                              goods.finalPriceInfoVO.priceInfo.counterPrice
                            }}</span
                          >
                        </p>
                        <div
                          class="Label-round"
                          v-if="goods.finalPriceInfoVO.banner"
                        >
                          <van-tag
                            round
                            type="danger"
                            v-if="goods.finalPriceInfoVO.banner.title"
                            >{{ goods.finalPriceInfoVO.banner.title }}</van-tag
                          >
                          <van-tag
                            round
                            type="danger"
                            class="tag2"
                            v-if="goods.finalPriceInfoVO.banner.content"
                            >{{
                              goods.finalPriceInfoVO.banner.content
                            }}</van-tag
                          >
                        </div>
                      </div>

                      <div
                        class="skuPrice2"
                        v-if="goods.finalPriceInfoVO.priceInfo.basicPrice"
                      >
                        <p>
                          <span class="priceIcon">￥</span>
                          <span
                            class="Price1"
                            v-if="goods.finalPriceInfoVO.priceInfo.basicPrice"
                            >{{
                              goods.finalPriceInfoVO.priceInfo.basicPrice
                            }}</span
                          >
                        </p>
                        <div
                          class="Label-round"
                          v-if="goods.finalPriceInfoVO.banner"
                        >
                          <van-tag
                            round
                            type="danger"
                            v-if="goods.finalPriceInfoVO.banner.title"
                            >{{ goods.finalPriceInfoVO.banner.title }}</van-tag
                          >
                          <van-tag
                            round
                            type="danger"
                            class="tag2"
                            v-if="goods.finalPriceInfoVO.banner.content"
                            >{{
                              goods.finalPriceInfoVO.banner.content
                            }}</van-tag
                          >
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { reqIndexData, reqIndexCategoryData } from "@/api";
export default {
  name: "Home",
  data() {
    return {
      goodsIdList: [
        11, 2, 2784, 12, 2869, 2558, 28, 3452, 3444, 3686, 4, 2561, 5, 871, 20,
        6, 3442, 3635, 2751, 24,
      ],
      isLogin: false,
      flag: false,
      overlayIstrue: false, //控制导航栏下拉
      categoryId: 0,
      tabList: [], //导航数据
      banner: [], //轮播图
      policyDescList: [], //政策信息
      gridList: [], //宫格导航
      floorList: [], //楼层数据
      newUserGift: [{}, {}], //新人专享礼
      categoryHotSellList: {
        categoryList: [{}, {}],
      }, //类目热销榜
      categoryList: [], //切割后的类目热销榜
      yangMao: [
        {
          styleItem: {
            picUrlList: [],
          },
        },
        {
          styleItem: {
            picUrlList: [],
          },
        },
      ], //超值捡漏

      //其他分类页数据
      categoryItemList: [],
      categoryPageBanner: [],
    };
  },
  watch: {},
  methods: {
    //导航下拉遮罩层控制
    changeOverlayIstrue() {
      this.overlayIstrue = !this.overlayIstrue;
    },
    //获取首页数据
    async getIndexData() {
      let result = await reqIndexData();
      if (result.code == 200) {
        this.tabList = result.data.data.categoryHotSellModule.categoryList;
        this.banner = result.data.data.focusList;
        this.policyDescList = result.data.data.policyDescList;
        this.gridList = result.data.data.kingKongModule.kingKongList;
        this.floorList = result.data.data.bigPromotionModule.floorList;
        this.newUserGift = result.data.data.indexActivityModule;
        this.categoryHotSellList = result.data.data.categoryHotSellModule;
        //切割后的类目热销榜
        this.categoryList =
          result.data.data.categoryHotSellModule.categoryList.slice(2);
        this.yangMao = result.data.data.sceneLightShoppingGuideModule;
      }
    },
    //分类点击事件
    handleCategory(categoryId, overlayIstrue) {
      this.categoryId = categoryId;
      this.categoryItemList = [];
      this.categoryPageBanner = [];
      if (overlayIstrue == false) {
        this.overlayIstrue = false;
      }
      if (categoryId != 0) {
        this.getIndexCategoryData(categoryId);
      }
    },
    //宫格分类点击
    handleGrid(schemeUrl) {
      if (schemeUrl.indexOf("categoryId") != -1) {
        let res = schemeUrl.split("categoryId=");
        let categoryId = res[1].split("&")[0];
        this.categoryId = categoryId;
        this.categoryItemList = [];
        this.categoryPageBanner = [];
        this.getIndexCategoryData(categoryId);
      }
    },
    //跳转到搜索页面
    toSearch() {
      this.$router.push({ path: "/search" });
    },
    //跳转登录页面
    toLogin() {
      this.$router.push({ path: "/login" });
    },
    //跳转到商品详情页面
    toGoodsDetails() {
      let goodsId =
        this.goodsIdList[
          this.lodash.random(0, this.goodsIdList.length - 1, false)
        ];
      console.log(goodsId);
      this.$router.push({ path: "/detail", query: { goodsId } });
    },
    //回到顶部
    toTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      //实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop =
          document.documentElement.scrollTop =
          top -=
            100;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 1);
    },
    //获取首页下分类页数据
    async getIndexCategoryData(categoryId) {
      let result = await reqIndexCategoryData(categoryId);
      this.categoryPageBanner = result.data.currentCategory.bannerList;
      //商品图片数据优化
      const canIUseWebP = (callback) => {
        const _img = new Image();
        // width, hegith = 1px | image/webp
        _img.src =
          "";
        _img.onload = _img.onerror = (e) =>
          callback(e.target.width === 1 && e.target.height === 1);
      };
      canIUseWebP((isSupportWebp) => {
        // isSupportWebp = true 表示支持
        if (isSupportWebp) {
          // 遍历元素替换url
          let newCategoryItemList = result.data.categoryItemList;
          for (let i = 0; i < newCategoryItemList.length; i++) {
            for (let j = 0; j < newCategoryItemList[i].itemList.length; j++) {
              if (
                newCategoryItemList[i].itemList[j].listPicUrl.indexOf("?") == -1
              ) {
                newCategoryItemList[i].itemList[j].listPicUrl =
                  newCategoryItemList[i].itemList[j].listPicUrl +
                  "?type=webp&imageView&quality=65&thumbnail=330x330";
              }
            }
          }
        }
      });
      this.categoryItemList = result.data.categoryItemList;
    },
    handleScroll() {
      let scroll =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (scroll > 680) {
        this.flag = true;
      } else {
        this.flag = false;
      }
    },
  },
  mounted() {
    if (localStorage.getItem("token")) {
      this.isLogin = true;
    } else {
      this.isLogin = false;
    }
    this.getIndexData();
    window.addEventListener("scroll", this.handleScroll);
  },
  //销毁,否则跳到别的路由还是会出现
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
};
</script>

<style lang="less" scoped>
.fixedbar {
  position: fixed;
  bottom: 60px;
  right: 15px;
  z-index: 999;
  width: 40px;
  height: 40px;
}
.fixedbar img {
  border-radius: 50%;
  width: 100%;
  height: 100%;
}
.swiperContainer {
  margin-top: 1px;
  width: 100%;
  height: 150px;
  .swiperItem {
    img {
      width: 100%;
    }
  }
}
.tab {
  position: relative;
}
.toggleWrap {
  z-index: 99;
  height: 1.17333rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 45px;
  right: 0;
}
.linear {
  background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, #fff);
  width: 37.5px;
  height: 1.17333rem;
}
.toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 28.5px;
  height: 1.17333rem;
  background-color: #fff;
  text-align: center;
  .icon_down {
    margin-bottom: 6px;
    color: #ccc;
  }
}

.van-search {
  padding: 0;
}
.van-search__content {
  background-color: #ededed;
}
.van-button--plain.van-button--primary {
  color: #dd1a21;
}
.van-button--primary {
  border: 0.02667rem solid #dd1a21;
}
.van-button--small {
  height: 28px;
}
.header {
  width: 100%;
  .headerContainer {
    background-color: #fff;
    width: 100%;
    height: 45px;
    .header_left {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      .logo {
        width: 75px;
        height: 25px;
        background-image: url(//yanxuan-static.nosdn.127.net/hxm/yanxuan-mall-wap/assets/img/index-20a8c6c35d0ec7b54782d2098282371f.png);
        background-size: 5.4rem 5.7rem;
        display: inline-block;
        background-position: 3.6rem -3.77rem;
      }
    }
    .header_center {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .header_right {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .tabContainer {
    width: 100%;
  }
  .serviceContainer {
    background-color: #fff;
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    .serviceItem {
      margin: 0 10px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
      p {
        font-size: 13px;
      }
      img {
        margin-bottom: 2px;
        width: 18px;
        height: 18px;
      }
    }
  }
  .gridContainer {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    background-color: #ffffff;
    .gridItem {
      margin: 8px 7px;
      width: 16%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      img {
        width: 60px;
        height: 60px;
      }
      p {
        margin-top: 2px;
        font-size: 12px;
      }
    }
  }
  .floor {
    img {
      height: 100%;
      width: 100%;
    }
  }
  .newUserContainer {
    background: #fff;
    margin-top: 0.2rem;
    padding-bottom: 0.3rem;
    .newUserTitle {
      width: 100%;
      height: 45px;
      line-height: 45px;
      text-align: center;
      font-size: 17px;
    }
    .newUserContent {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      .content_left {
        border-radius: 5px;
        background-color: #f9e9cf;
        width: 170px;
        height: 215px;
        .gift {
          font-size: 16px;
          padding: 0.3rem 0 0 0.3rem;
        }
        img {
          margin: 20px;
          width: 129px;
          height: 129px;
        }
      }
      .content_right {
        margin-left: 3px;
        width: 170px;
        height: 215px;
        .content_right_top {
          border-radius: 5px;
          margin-bottom: 3px;
          width: 100%;
          height: 106px;
          background-color: #fbe2d3;
          .right_topContainer {
            padding: 0.3rem 0 0 0.3rem;
            .top_text {
              width: 100%;
              display: inline-block;
              .fulishe {
                color: #333;
                font-size: 16px;
              }
              .tejia {
                color: #7f7f7f;
                font-size: 12px;
              }
            }
            img {
              position: absolute;
              width: 100px;
              height: 100px;
              right: 16px;
            }
          }
        }
        .content_right_bottom {
          border-radius: 5px;
          width: 100%;
          height: 106px;
          background-color: #ffecc2;
          .right_topContainer {
            padding: 0.3rem 0 0 0.3rem;
            .top_text {
              display: inline-block;
              .fulishe {
                color: #333;
                font-size: 16px;
              }
              .tejia {
                padding: 2px 4px;
                border-radius: 5px;
                background-color: #cbb693;
                color: #fff;
                font-size: 12px;
              }
            }
            img {
              position: absolute;
              width: 100px;
              height: 100px;
              right: 16px;
            }
          }
        }
      }
    }
  }
  .discount {
    width: 40px;
    height: 40px;
    opacity: 0.8;
    color: #fff;
    position: relative;
    top: -40px;
    right: -108px;
    background: #f59524;
    border-radius: 50%;
    text-align: center;
    margin-bottom: 20px;
    .line1 {
      padding-top: 7px;
      font-size: 12px;
    }
    .line2 {
      text-decoration: line-through;
      font-size: 12px;
    }
  }
  .categoryContainer {
    background-color: #fff;
    margin-top: 0.2rem;
    .categoryTitle {
      width: 100%;
      height: 37.5px;
      line-height: 37.5px;
      padding: 0 0.3rem;
      .categoryTitle_text {
        font-size: 16px;
      }
    }
    .categoryContent {
      padding: 0 0.2rem 0.2rem 0.3rem;
      .content_one {
        padding-top: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
        .content_one_left {
          background-color: #f9f3e4;
          width: 49%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 1%;
          p {
            font-size: 14px;
          }
          img {
            width: 95px;
            height: 95px;
          }
        }
        .content_one_right {
          background-color: #ebeff6;
          width: 49%;
          display: flex;
          align-items: center;
          justify-content: center;
          p {
            font-size: 14px;
          }
          img {
            width: 95px;
            height: 95px;
          }
        }
      }
      .content_two {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        .content_twoItem {
          background-color: #f5f5f5;
          width: 24.1%;
          margin: 3px 3px 3px 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          p {
            padding-top: 4px;
            font-size: 12px;
          }
          img {
            width: 60px;
            height: 60px;
          }
        }
      }
    }
  }
  .otherShow {
    padding-bottom: 65px;
    width: 100%;
    background-color: #fff;
    .otherShowContainer {
      display: flex;
      margin: 0 10px;
      .otherShow_left {
        padding: 10px 15px;
        display: flex;
        flex-direction: column;
        margin-right: 3px;
        width: 50%;
        background-color: #f5f5f5;
        .otherShow_left_text {
          .otherShow_left_text_title {
            color: #333;
            font-size: 16px;
          }
          .otherShow_left_text_desc {
            font-size: 12px;
            color: #8037d3;
          }
        }
        .other_image {
          margin: 0 auto;
          display: flex;
          .other_imageItem {
            width: 75px;
            height: 75px;
          }
        }
      }
      .otherShow_right {
        padding: 10px 15px;
        display: flex;
        flex-direction: column;
        margin-right: 3px;
        width: 50%;
        background-color: #f5f5f5;
        .otherShow_left_text {
          .otherShow_left_text_title {
            color: #333;
            font-size: 16px;
          }
          .otherShow_left_text_desc {
            font-size: 12px;
            color: #ff6f0f;
          }
        }
        .other_image {
          margin: 0 auto;
          display: flex;
          .other_imageItem {
            width: 75px;
            height: 75px;
          }
        }
      }
    }
  }
  .overlay {
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 45px;
    .overlayContent {
      width: 100%;
      height: 200px;
      background-color: #fff;
      .overlayContent_top {
        height: 40px;
        display: flex;
        padding: 0 2px 0 15px;
        align-items: center;
        justify-content: space-between;
        color: #ccc;
        p {
          color: #333;
          font-size: 14px;
        }
      }
      .overlayContent_main {
        padding: 0 15px 0 15px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        .overlayContent_mainItem {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 11px;
          margin-bottom: 20px;
          width: 75px;
          height: 28px;
          background-color: #fafafa;
          color: #333;
          border: 1px solid #ccc;
          font-size: 12px;
          &.active {
            color: #dd1a21;
            border: 1px solid #dd1a21;
          }
        }
      }
    }
  }
}

//商品列表
.skuListContainer {
  margin-bottom: 50px;
  .skulist {
    margin-bottom: 5px;
    .split-box {
      width: 100%;
      height: 10px;
      background-color: #eeeeee;
    }
    .blockText {
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 65px;
      .blockText_title {
        color: #333;
        margin-bottom: 6px;
        font-size: 16px;
      }
      .blockText_desc {
        color: #999999;
        font-size: 12px;
        margin-bottom: 5px;
      }
    }
    .skulist-content {
      display: flex;
      flex-wrap: wrap;
      background-color: #ffffff;
      .skuItem {
        width: 173px;
        height: 284px;
        margin: 0 7px 20px;
        .skuImg {
          background-color: #f4f4f4;
          border-radius: 10px;
          width: 100%;
          height: 173px;
          img {
            width: 100%;
            height: 100%;
            border-radius: 10px;
          }
        }
        .skuName {
          width: 100%;
          font-size: 15px;
          margin-top: 8px;
          display: -webkit-box;
          word-break: break-all;
          text-overflow: ellipsis;
          overflow: hidden;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .skuPrice1 {
          width: 100%;
          p {
            .Price1 {
              color: #fa1e32;
              font-size: 12px;
              font-weight: 600;
            }
            .Price3 {
              color: #fa1e32;
              font-size: 20px;
              font-weight: 600;
            }
            .Price2 {
              font-weight: 500;
              font-size: 12px;
              text-decoration: line-through;
              color: rgb(134, 132, 132);
            }
          }
          .Label-round {
            height: 22px;
            display: flex;
            align-items: center;
            .tag2 {
              font-weight: 700;
              color: #fa1e32;
              background-color: #ffe9eb;
            }
          }
        }
        .skuPrice2 {
          width: 100%;
          height: 30px;
          p {
            .priceIcon {
              color: #fa1e32;
              font-size: 12px;
            }
            .Price1 {
              color: #fa1e32;
              font-size: 20px;
              font-weight: 600;
            }
          }
        }
        .Label-round {
          height: 22px;
          display: flex;
          align-items: center;
          .tag2 {
            font-weight: 700;
            color: #fa1e32;
            background-color: #ffe9eb;
          }
        }
      }
    }
  }
}
</style>
